$(function() {
	var xpsf = householdData.xpsf;
	var str = '';
	$.each(xpsf, function(i, v) {
		str =
			`<li class="main6-li"><img src=${v.url}><p class='price'>${v.price}</p><p class='discripe'>${v.describe}</p><button class="ckxq">查看详情</button></li>`;
		$($(".main6")[0]).append(str);
		$($(".main6")[2]).append(str);
	})
	$.each($('.main5-right-li'), function(i, v) {
		$('.main5-right-li').mouseenter(function() {
			var index = $(".main5-right-li").index($(this));
			$($('.main6')[index]).stop().show().siblings('.main6').stop().hide();
		})
	})
	var jptj = householdData.jptj;
	var str1 = '';
	$.each(jptj, function(i, v) {
		str1 =
			`<li class="main6-li"><img src=${v.url}><p class='price'>${v.price}</p><p class='discripe'>${v.describe}</p><button class="ckxq">查看详情</button></li>`;
		$($(".main6")[1]).append(str1)
		$($(".main6")[3]).append(str1)
	})

	var guo = householdData.guo;

	function xuanran(sj, aitem, liname, bitem, box) {
		//sj是json数据
		//aitem ul盒子数量
		//liname  li名字
		//bitem   tab栏
		//box 需要排它的盒子
		aitem.each(function(i) { //遍历ul
			var str2 = '';
			$(sj[i]).each(function(i2, v) { //遍历json数据（guo）
				$(v).each(function() {
					str2 += `
					<li class="${liname}">
						<img src=${v.url}>
						<p class="discripe">${v.describe}</p>
						<p class="price">${v.price}</p>	
					</li>
					`;
				})
			})
			$(aitem[i]).append(str2);
		})
		$(box[0]).css('display', 'block').siblings().css('display', 'none');
		//遍历tab栏
		bitem.each(function(i, v) {
			var index2 = bitem.index($(this));
			//排它
			$(this).mouseover(function() {
				$(box[index2]).css('display', 'block').siblings().css('display',
					'none');
			})
		})
	}
	xuanran(guo, $(".ss1 .main9-right"), "main9-right-li", $(".ss1 .main8-li"), $(
		".ss1 .main9-item"));
	var pbds = householdData.pbds;
	xuanran(pbds, $(".ss2 .main9-right"), "main9-right-li", $(".ss2 .main8-li"), $(
		".ss2 .main9-item"));
	var ghjk = householdData.ghjk;
	xuanran(ghjk, $(".ss3 .main9-right"), "main9-right-li", $(".ss3 .main8-li"), $(
		".ss3 .main9-item"));
	var wjjz = householdData.wjjz;
	xuanran(wjjz, $(".ss4 .main9-right"), "main9-right-li", $(".ss4 .main8-li"), $(
		".ss4 .main9-item"));
	var shdq = householdData.shdq;
	xuanran(shdq, $(".ss5 .main9-right"), "main9-right-li", $(".ss5 .main8-li"), $(
		".ss5 .main9-item"));


	function linearAnimation(ele, target) {
		clearInterval(interId);
		interId = setInterval(function() {
			// x:小盒距离 大盒子的距离 和 target目标距离
			// x800|0 == target800|0 ,,清空定时器
			// x0-799 > target 0, 向左  点击向左 moveAnimation(small,0)
			// x0-799 <target 800 向右  点击向右 moveAnimation(small,800)
			var x = ele.offsetLeft; //400,800 0-500
			if (x == target) {
				clearInterval(interId);
			} else if (x > target) {
				x -= 13;
				x = x < target ? target : x;
				ele.style.left = x + 'px';
			} else if (x < target) {
				x += 13;
				x = x > target ? target : x;
				ele.style.left = x + 'px';
			}
		}, 10)
	}
	var interId;
	var box2 = document.querySelector('.shuffling ul');
	var item = document.querySelectorAll('.shuffling ul li');
	var circle = document.getElementsByClassName('circle');
	var index = 0;
	var clrindex = 0;
	var aaa;

	function lunbo() {
		aaa = setInterval(function() {
			console.log(index);
			index++;
			clrindex++;
			if (index >= item.length) {
				index = 1;
				box2.style.left = '0px';
			}
			if (clrindex == circle.length) {
				clrindex = 0;
			}
			initColor(circle);
			circle[clrindex].className = 'circle guodong';
			var a = -991 * index;
			linearAnimation(box2, a);
		}, 3000)
	}
	lunbo();

	function initColor(arr) {
		for (var i = 0; i < arr.length; i++) {
			arr[i].className = 'circle';
		}
	}

	for (var i = 0; i < circle.length; i++) {
		circle[i].ind = i;
		circle[i].onclick = function(e) {
			clearInterval(aaa);
			index = this.ind;
			clrindex = this.ind;
			initColor(circle);
			circle[clrindex].className = 'circle guodong';
			var a = -991 * index;
			linearAnimation(box2, a);
		}
	}











	// 原生函数结束口
})
// 楼层导航
window.onscroll = function(e) {

	var main4 = document.getElementsByClassName('main4')[0].offsetHeight; //上一个的距离

	//侧边栏大盒子
	var box_lcdh = document.getElementsByClassName('box-lcdh')[0];
	//里面的每一条li
	var box_lcdh_li = document.getElementsByClassName('box-lcdh-li');
	var wy = window.pageYOffset; //位移
	// console.log(wy);
	if (wy >= main4) {
		box_lcdh.style.display = 'block';
	} else {
		box_lcdh.style.display = 'none';
	}
	for (var i = 0; i < box_lcdh_li.length; i++) {
		box_lcdh_li[i].setAttribute('class', 'box-lcdh-li');
	}
	if (wy > 500 && wy < 950) {
		box_lcdh_li[0].setAttribute('class', 'box-lcdh-li active');

	} else if (wy > 950 && wy < 1362) {
		box_lcdh_li[1].setAttribute('class', 'box-lcdh-li active');
	} else if (wy > 1362 && wy < 2063) {
		box_lcdh_li[2].setAttribute('class', 'box-lcdh-li active');
	} else if (wy > 2063 && wy < 2800) {
		box_lcdh_li[3].setAttribute('class', 'box-lcdh-li active');
	} else if (wy > 2800 && wy < 3570) {
		box_lcdh_li[4].setAttribute('class', 'box-lcdh-li active');
	} else if (wy > 3570 && wy < 4300) {
		box_lcdh_li[5].setAttribute('class', 'box-lcdh-li active');
	} else if (wy > 4300 && wy < 5000) {
		box_lcdh_li[6].setAttribute('class', 'box-lcdh-li active');
	}
}
